<template>
	<view class="page">
		<view class="tabbar">
			<view class="itemtab" :class="tab==1?'act':''" @click="selecttype(1)">
				<view class="name">
					一级
				</view>
				<view class="line">
					
				</view>
			</view>
			
			<view class="itemtab" :class="tab==2?'act':''" @click="selecttype(2)">
				<view class="name">
					二级
				</view>
				<view class="line">
					
				</view>
			</view>
			<view class="itemtab" :class="tab==3?'act':''" @click="selecttype(3)">
				<view class="name">
					三级
				</view>
				<view class="line">
					
				</view>
			</view>
	
		</view>
		<view class="listbox">
			<view class="itemlist" v-for="item in list " :key="item.id">
			   <view class="imgbox">
			   	<image :src="'https://admin.caifubang.top/prod-api'+item.memberImg" mode=""></image>
			   </view>	
			   <view class="info">
			   	<view class="left">
			   		<view class="name">
			   			{{item.memberName}}
			   		</view>
					<view class="time">
						{{item.createTime}}
					</view>
			   	</view>
				<view class="right">
					<view class="title">
						帮我赚
					</view>
					<view class="price">
						{{item.commissionAmount}}
					</view>
				</view>
			   </view>
			
			</view>
		</view>
	</view>
</template>

<script>
	import {myDownlineCommission} from '../../utils/api.js'
	export default {
		data() {
			return {
				tab:1,
				list:[],
				level1:[],
				level2:[],
				level3:[]
				
			}
		},
		onShow() {
			myDownlineCommission().then(res=>{
				console.log(res,'这是下级')
				this.list=res.data.data.level1
				this.level1=res.data.data.level1
				this.level2=res.data.data.level2
				this.level3=res.data.data.level3
			})
		},
		methods: {
			selecttype(e){
				this.tab=e
				if(e==1){
					this.list=this.level1
				}
				if(e==2){
					this.list=this.level2
				}
				if(e==3){
					this.list=this.level3
				}
			},
		}
	}
</script>

<style lang="less" scoped>
  .page{
	  width: 750rpx;
	  box-sizing: border-box;
	  background-color: whitesmoke;
	  .tabbar{
		  width: 100%;
		  display: flex;
		  align-items: center;
		  justify-content: space-evenly;
		  padding-top: 20rpx;
		  .itemtab{
			 
			  font-weight: bold;
			  color: #A2A2A2 ;
			  text-align: center;
			  .line{
				  width: 70rpx;
				  height: 8rpx;
				  border-radius: 4rpx;
				  margin: auto;
			  }
		  }
		  .act{
			  color: #FF6D00;
			  .line{
				  background-color: #FF6D00 ;
			  }
		  }
	  }
	  .listbox{
		  width: 100%;
		  box-sizing: border-box;
		  padding: 20rpx;
		  .itemlist{
			  width: 100%;
			  background-color: white;
			  box-sizing: border-box;
			  padding: 20rpx;
			  display: flex;
			  align-items: center;
			  .imgbox{
				  width: 100rpx;
				  height: 100rpx;
				  border-radius: 50%;
				  margin-right: 20rpx;
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 50%;
				  }
			  }
			  .info{
				  flex: 1;
				  display: flex;
				  align-items: center;
				  justify-content: space-between;
				  .left{
					 .name{
						 font-weight: bold;
					 }
					 .time{
						 font-size: 24rpx;
						 color: gray;
					 }
					
				  }
				  .right{
					  display: flex;
					  align-items: center;
					  .title{
						  
					  }
					  .price{
						  font-weight: bold;
						  color: #FF5C00;
					  }
				  }
			
				  
			  }
		  }
	  }
  }
</style>
